<html>
<head>
  <title>OmniDB</title>
  <style>
  </style>
  <link rel="shortcut icon" type="image/x-icon" href="{{url_folder}}/static/OmniDB_app/images/favicon.ico"/>

	<link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/css/style.css?v2.17.0.0"            />

  <link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/css/modern-style.css?v2.17.0.0"            />

	<link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/css/handsontable.full.css?v2.17.0.0"/>
	<link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/css/msdropdown/dd.css?v2.17.0.0"    />
  <link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/lib/tabs/css/tabs.css?v2.17.0.0"    />
  <link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/css/popper.css?v2.17.0.0"  />

  <link rel="stylesheet" href="{{url_folder}}/static/OmniDB_app/css/explain/bootstrap.css">
  <link rel="stylesheet" href="{{url_folder}}/static/OmniDB_app/css/explain/main.css">

  <link rel="stylesheet" href="{{url_folder}}/static/OmniDB_app/fa/css/all.css">
  <link rel="stylesheet" href="{{url_folder}}/static/OmniDB_app/css/xterm.css">

  <link id="ss_theme" rel="stylesheet" type="text/css">

  {% block include_css %}
  {% endblock %}

</head>
<body>
	<div class="header">
		<div class="header_menu">
			<img src="{{url_folder}}/static/OmniDB_app/images/omnidb.png" />
			<ul>
        {% block header_menu %}
        {% endblock %}
			</ul>
			<div style="position: absolute; right: 0px; top: 0px;">
				<ul>
          <li id="tooltip_status" style="padding: 0px 10px;">
            <i id="websocket_status_offline" class="fas fa-signal" title="Offline" style="vertical-align: middle; cursor: pointer; color: #ff3d3d;"></i>
            <i id="websocket_status_connecting" class="fas fa-signal" title="Connecting..." style="vertical-align: middle; cursor: pointer; color: #7eafff; display: none;"></i>
            <i id="websocket_status_online" class="fas fa-signal" title="Online" style="vertical-align: middle; cursor: pointer; color: #74ff5d; display: none;"></i>
          </li>
          {% if not desktop_mode %}
  					<li style="color: #F1F7FF; padding-right: 10px;">{{ user_name }}</li>
            {% if super_user == 1 %}
    					<li style="padding-right: 10px;"><i class="fas fa-user" title="Manage users" style="vertical-align: middle; cursor: pointer;" onclick="listUsers();"></i></li>
    				{% endif %}
          {% endif %}
					<li style="padding-right: 10px;"><i class="fas fa-cog" title="User settings" style="vertical-align: middle; cursor: pointer;" onclick="showConfigUser();"></i></li>
          <li style="padding-right: 10px;"><i class="fas fa-cube" title="View plugins" style="vertical-align: middle; cursor: pointer;" onclick="showPlugins();"></i></li>
          {% block header_actions %}
          {% endblock %}
					<li style="padding-right: 10px;"><i class="fas fa-info-circle" title="About" style="vertical-align: middle; cursor: pointer;" onclick="showAbout();"></i></li>
          {% if not desktop_mode %}
          <li><a onclick="confirmSignout()">Sign out</a></li>
          {% endif %}
				</ul>
			</div>
		</div>
	</div>

  {% block content %}
  {% endblock %}

  <div id="div_plugins" class="isModal modal_background_dark">
	        <div class ="plugin_box">
	            <a class="modal-closer" onclick="hidePlugins()">x</a>
              <label id="plugin_file_label" for='plugin_file_selector'>Select plugin package to be installed...</label>
              <input type="file" id="plugin_file_selector" onchange="upload(this)">
	            <div id="plugin_grid"></div>
	</div>
  </div>

	<div id="div_config_user" class="isModal modal_background_dark">
	        <div class ="config_box">
	            <a class="modal-closer" onclick="hideConfigUser()">x</a>

	            <div id="config_tabs" style='margin-top: 10px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px;'>
	                <ul>
                  <li id="config_tabs_tab1">Shortcuts</li>
	                <li id="config_tabs_tab2">User Options</li>
                  {% if not desktop_mode %}
	                <li id="config_tabs_tab3">Password</li>
                  {% endif %}
	  				</ul>
            <div id="div_config_tabs_tab1">

              <div id="div_shortcut_background_dark"><div style="position: absolute; top: 50%; width: 100%;">Press key combination... (ESC to cancel)</div></div>

              <div class='shortcut_block'>

                <div class='shortcut_block_title'>Editor</div>
                Shortcuts active in all editors. They will override any user defined shortcut. See list <a class='link_text' onclick="showWebsite('Shortcuts','/shortcuts')" >here</a>.

                <div class='shortcut_block_title' style="margin-top: 10px;">Query/Console Tab</div>

                <div class='shortcut_line'>
                  <div class='shortcut_element'>Run Query</div>
                  <div class='shortcut_element'><button id="shortcut_run_query" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>

                <div class='shortcut_line'>
                  <div class='shortcut_element'>Cancel Query</div>
                  <div class='shortcut_element'><button id="shortcut_cancel_query" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>

                <div class='shortcut_line'>
                  <div class='shortcut_element'>Indent</div>
                  <div class='shortcut_element'><button id="shortcut_indent" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>

                <div class='shortcut_line'>
                  <div class='shortcut_element'>Autocomplete</div>
                  <div class='shortcut_element'><button id="shortcut_autocomplete" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>

                <div class='shortcut_line'>
                  <div class='shortcut_element'>Explain (PostgreSQL)</div>
                  <div class='shortcut_element'><button id="shortcut_explain" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>

                <div class='shortcut_line'>
                  <div class='shortcut_element'>Explain Analyze (PostgreSQL)</div>
                  <div class='shortcut_element'><button id="shortcut_analyze" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>

                <div class='shortcut_line'>
                  <div class='shortcut_element'>Previous Command (Console Tab)</div>
                  <div class='shortcut_element'><button id="shortcut_previous_console_command" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>

                <div class='shortcut_line'>
                  <div class='shortcut_element'>Next Command (Console Tab)</div>
                  <div class='shortcut_element'><button id="shortcut_next_console_command" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>

                <div class='shortcut_block_title'>Tab Management</div>

                <div class='shortcut_line'>
                  <div class='shortcut_element'>New Inner Tab</div>
                  <div class='shortcut_element'><button id="shortcut_new_inner_tab" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>
                <div class='shortcut_line'>
                  <div class='shortcut_element'>Remove Current Inner Tab</div>
                  <div class='shortcut_element'><button id="shortcut_remove_inner_tab" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>
                <div class='shortcut_line'>
                  <div class='shortcut_element'>Select Left Inner Tab</div>
                  <div class='shortcut_element'><button id="shortcut_left_inner_tab" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>
                <div class='shortcut_line'>
                  <div class='shortcut_element'>Select Right Inner Tab</div>
                  <div class='shortcut_element'><button id="shortcut_right_inner_tab" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>

                <div class='shortcut_line'>
                  <div class='shortcut_element'>New Connection Tab</div>
                  <div class='shortcut_element'><button id="shortcut_new_outer_tab" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>
                <div class='shortcut_line'>
                  <div class='shortcut_element'>Remove Current Connection Tab</div>
                  <div class='shortcut_element'><button id="shortcut_remove_outer_tab" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>
                <div class='shortcut_line'>
                  <div class='shortcut_element'>Select Left Outer Tab</div>
                  <div class='shortcut_element'><button id="shortcut_left_outer_tab" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>
                <div class='shortcut_line'>
                  <div class='shortcut_element'>Select Right Outer Tab</div>
                  <div class='shortcut_element'><button id="shortcut_right_outer_tab" class='shortcut_button' onclick="startSetShortcut(this)"></button></div>
                </div>

              </div>
              <div style="text-align: center; margin-top: 10px; margin-bottom: 5px;">
                <button onclick="saveShortcuts();">Save Changes</button>
              </div>


	  				</div>
	  				<div id="div_config_tabs_tab2">

	  					<div style="margin: 30px; height: auto; top: 0px; bottom: 0px; left: 0px; right: 0px;">
		                <div style="text-align: center;">
		                <div style="margin-bottom: 10px;">Interface font size</div>
		                <select id="sel_interface_font_size" style="width: 200px; margin-bottom: 20px;" onchange="changeInterfaceFontSize(this.value)">
		                	<option value="10">10</option>
		                	<option value="11">11</option>
		                	<option value="12">12</option>
		                	<option value="13">13</option>
		                	<option value="14">14</option>
		                	<option value="15">15</option>
		                	<option value="16">16</option>
		                	<option value="17">17</option>
		                	<option value="18">18</option>
                      <option value="19">19</option>
                      <option value="20">20</option>
		                </select>
                    <div style="margin-bottom: 10px;">Editor font size</div>
		                <select id="sel_editor_font_size" style="width: 200px; margin-bottom: 20px;" onchange="changeFontSize(this.value)">
		                	<option value="10">10</option>
		                	<option value="11">11</option>
		                	<option value="12">12</option>
		                	<option value="13">13</option>
		                	<option value="14">14</option>
		                	<option value="15">15</option>
		                	<option value="16">16</option>
		                	<option value="17">17</option>
		                	<option value="18">18</option>
                      <option value="19">19</option>
                      <option value="20">20</option>
		                </select>
                    <div style="margin-bottom: 10px;">Editor theme</div>
		                <select id="sel_editor_theme" style="width: 200px; margin-bottom: 20px;" onchange="changeTheme(this.value)">
		                	<option value="1/omnidb">(Light) OmniDB</option>
		                	<option value="2/chrome">(Light) Chrome</option>
		                	<option value="3/clouds">(Light) Clouds</option>
		                	<option value="4/crimson_editor">(Light) Crimson Editor</option>
		                	<option value="5/dawn">(Light) Dawn</option>
		                	<option value="6/dreamweaver">(Light) Dreamweaver</option>
		                	<option value="7/eclipse">(Light) Eclipse</option>
		                	<option value="8/github">(Light) Github</option>
		                	<option value="9/iplastic">(Light) Iplastic</option>
		                	<option value="10/katzenmilch">(Light) Katzenmilch</option>
		                	<option value="11/kuroir">(Light) Kuroir</option>
		                	<option value="12/solarized_light">(Light) Solarized Light</option>
		                	<option value="13/sqlserver">(Light) SQL Server</option>
		                	<option value="14/textmate">(Light) Textmate</option>
		                	<option value="15/tomorrow">(Light) Tomorrow</option>
		                	<option value="16/xcode">(Light) XCode</option>
							        <option value="17/omnidb_dark">(Dark) OmniDB Dark</option>
		                	<option value="18/ambiance">(Dark) Ambiance</option>
		                	<option value="19/chaos">(Dark) Chaos</option>
		                	<option value="20/clouds_midnight">(Dark) Clouds Midnight</option>
		                	<option value="21/cobalt">(Dark) Cobalt</option>
		                	<option value="22/idle_fingers">(Dark) Idle Fingers</option>
		                	<option value="23/kr_theme">(Dark) KR Theme</option>
		                	<option value="24/merbivore">(Dark) Merbivore</option>
		                	<option value="25/merbivore_soft">(Dark) Merbivore Soft</option>
		                	<option value="26/mono_industrial">(Dark) Mono Industrial</option>
		                	<option value="27/monokai">(Dark) Monokai</option>
		                	<option value="28/pastel_on_dark">(Dark) Pastel On Dark</option>
		                	<option value="29/solarized_dark">(Dark) Solarized Dark</option>
		                	<option value="30/terminal">(Dark) Terminal</option>
		                	<option value="31/tomorrow_night">(Dark) Tomorrow Night</option>
		                	<option value="32/tomorrow_night_blue">(Dark) Tomorrow Night Blue</option>
		                	<option value="33/tomorrow_night_bright">(Dark) Tomorrow Night Bright</option>
		                	<option value="34/tomorrow_night_eighties">(Dark) Tomorrow Night 80s</option>
		                	<option value="35/twilight">(Dark) Twilight</option>
		                	<option value="36/vibrant_ink">(Dark) Vibrant Ink</option>
		                </select>
		                </div>
                    <div style="text-align: center;">
                      <div style="margin-bottom: 10px;">CSV Encoding</div>
                      <select id="sel_csv_encoding" style="width: 200px; margin-bottom: 20px;">
                        <option value="ascii">ascii</option>
                        <option value="big5">big5</option>
                        <option value="big5hkscs">big5hkscs</option>
                        <option value="cp037">cp037</option>
                        <option value="cp273">cp273</option>
                        <option value="cp424">cp424</option>
                        <option value="cp437">cp437</option>
                        <option value="cp500">cp500</option>
                        <option value="cp720">cp720</option>
                        <option value="cp737">cp737</option>
                        <option value="cp775">cp775</option>
                        <option value="cp850">cp850</option>
                        <option value="cp852">cp852</option>
                        <option value="cp855">cp855</option>
                        <option value="cp856">cp856</option>
                        <option value="cp857">cp857</option>
                        <option value="cp858">cp858</option>
                        <option value="cp860">cp860</option>
                        <option value="cp861">cp861</option>
                        <option value="cp862">cp862</option>
                        <option value="cp863">cp863</option>
                        <option value="cp864">cp864</option>
                        <option value="cp865">cp865</option>
                        <option value="cp866">cp866</option>
                        <option value="cp869">cp869</option>
                        <option value="cp874">cp874</option>
                        <option value="cp875">cp875</option>
                        <option value="cp932">cp932</option>
                        <option value="cp949">cp949</option>
                        <option value="cp950">cp950</option>
                        <option value="cp1006">cp1006</option>
                        <option value="cp1026">cp1026</option>
                        <option value="cp1125">cp1125</option>
                        <option value="cp1140">cp1140</option>
                        <option value="cp1250">cp1250</option>
                        <option value="cp1251">cp1251</option>
                        <option value="cp1252">cp1252</option>
                        <option value="cp1253">cp1253</option>
                        <option value="cp1254">cp1254</option>
                        <option value="cp1255">cp1255</option>
                        <option value="cp1256">cp1256</option>
                        <option value="cp1257">cp1257</option>
                        <option value="cp1258">cp1258</option>
                        <option value="cp65001">cp65001</option>
                        <option value="euc-jp">euc-jp</option>
                        <option value="euc-jis-2004">euc-jis-2004</option>
                        <option value="euc-jisx0213">euc-jisx0213</option>
                        <option value="euc-kr">euc-kr</option>
                        <option value="gb2312">gb2312</option>
                        <option value="gbk">gbk</option>
                        <option value="gb18030">gb18030</option>
                        <option value="hz">hz</option>
                        <option value="iso2022-jp">iso2022-jp</option>
                        <option value="iso2022-jp-1">iso2022-jp-1</option>
                        <option value="iso2022-jp-2">iso2022-jp-2</option>
                        <option value="iso2022-jp-2004">iso2022-jp-2004</option>
                        <option value="iso2022-jp-3">iso2022-jp-3</option>
                        <option value="iso2022-jp-ext">iso2022-jp-ext</option>
                        <option value="iso2022-kr">iso2022-kr</option>
                        <option value="latin-1">latin-1</option>
                        <option value="iso8859-2">iso8859-2</option>
                        <option value="iso8859-3">iso8859-3</option>
                        <option value="iso8859-4">iso8859-4</option>
                        <option value="iso8859-5">iso8859-5</option>
                        <option value="iso8859-6">iso8859-6</option>
                        <option value="iso8859-7">iso8859-7</option>
                        <option value="iso8859-8">iso8859-8</option>
                        <option value="iso8859-9">iso8859-9</option>
                        <option value="iso8859-10">iso8859-10</option>
                        <option value="iso8859-11">iso8859-11</option>
                        <option value="iso8859-13">iso8859-13</option>
                        <option value="iso8859-14">iso8859-14</option>
                        <option value="iso8859-15">iso8859-15</option>
                        <option value="iso8859-16">iso8859-16</option>
                        <option value="johab">johab</option>
                        <option value="koi8-r">koi8-r</option>
                        <option value="koi8-t">koi8-t</option>
                        <option value="koi8-u">koi8-u</option>
                        <option value="kz1048">kz1048</option>
                        <option value="mac-cyrillic">mac-cyrillic</option>
                        <option value="mac-greek">mac-greek</option>
                        <option value="mac-iceland">mac-iceland</option>
                        <option value="mac-latin2">mac-latin2</option>
                        <option value="mac-roman">mac-roman</option>
                        <option value="mac-turkish">mac-turkish</option>
                        <option value="ptcp154">ptcp154</option>
                        <option value="shift-jis">shift-jis</option>
                        <option value="shift-jis-2004">shift-jis-2004</option>
                        <option value="shift-jisx0213">shift-jisx0213</option>
                        <option value="utf-32">utf-32</option>
                        <option value="utf-32-be">utf-32-be</option>
                        <option value="utf-32-le">utf-32-le</option>
                        <option value="utf-16">utf-16</option>
                        <option value="utf-16-be">utf-16-be</option>
                        <option value="utf-16-le">utf-16-le</option>
                        <option value="utf-7">utf-7</option>
                        <option value="utf-8">utf-8</option>
                        <option value="utf-8-sig">utf-8-sig</option>
                        <option value="windows-1252">windows-1252</option>
                      </select>
                    </div>
                    <div style="text-align: center;">
                      <div style="margin-bottom: 10px;">CSV Delimiter</div>
                      <input id="txt_csv_delimiter" style="width: 200px; margin-bottom: 20px;">
                    </div>
                    <div style="text-align: center;">
                      <button onclick="saveConfigUser();">Save Changes</button>
                    </div>
		                </div>


	  				</div>
            {% if not desktop_mode %}
	  				<div id="div_config_tabs_tab3">
            {% else %}
            <div id="div_config_tabs_tab3" style="display: none;">
            {% endif %}
	  					<div style="margin: 30px; height: auto; top: 0px; bottom: 0px; left: 0px; right: 0px;">
		                	<div style="text-align: center;">
		                		<div style="margin-bottom: 10px;">New Password</div>
		                		<input id="txt_new_pwd" type="password" style="width: 200px; margin-bottom: 20px;">
		                	</div>
		                	<div style="text-align: center;">
		                		<div style="margin-bottom: 10px;">Confirm New Password</div>
		                		<input id="txt_confirm_new_pwd" type="password" style="width: 200px; margin-bottom: 20px;">
		                	</div>
		                	<div style="text-align: center; display: none;">
		                		<div style="margin-bottom: 10px;">Enable OmniChat</div>
		                		<input id="chk_enable_chat" type="checkbox" style="width: 200px; margin-bottom: 20px;">
		                	</div>
		                	<div style="text-align: center;">
			                	<button onclick="saveConfigUser();">Save Changes</button>
		                	</div>
		                </div>
	  				</div>
				</div>
	    </div>
	</div>

    <div id="div_about" class="isModal">
        <div class="modal_background_dark">
            <div class ="white_box" style="width: 40%; left: 30%; top: 30%;">
                <a class="modal-closer" onclick="hideAbout()">x</a>
                <div style="width: 100%; text-align: center;">
                	<div style="margin: 20px;"><h1>{{ omnidb_version }}</h1></div>
                	<div style="margin: 20px;">
                		<img src="{{url_folder}}/static/OmniDB_app/images/postgresql_medium.png" title="PostgreSQL"/>
                        <img src="{{url_folder}}/static/OmniDB_app/images/oracle_medium.png" title="Oracle"/>
                		<img src="{{url_folder}}/static/OmniDB_app/images/mysql_medium.png" title="MySQL"/>
                		<img src="{{url_folder}}/static/OmniDB_app/images/mariadb_medium.png" title="MariaDB"/>
                        <!--<img src="{{url_folder}}/static/OmniDB_app/images/sqlserver_medium.png" title="SQL Server"/>
                		<img src="{{url_folder}}/static/OmniDB_app/images/firebird_medium.png" title="Firebird"/>
                		<img src="{{url_folder}}/static/OmniDB_app/images/sqlite_medium.png" title="SQLite"/>
                		<img src="{{url_folder}}/static/OmniDB_app/images/access_medium.png" title="Microsoft Access"/>-->
                	</div>
                	<div style="margin: 20px;"><a onclick="showWebsite('OmniDB', 'https://www.omnidb.org')" >www.omnidb.org</a></div>
                  <div style="margin: 20px;">
                    <h2>Primary Supporter:</h2>
                    <a onclick="showWebsite('2ndQuadrant', 'https://www.2ndquadrant.com')" ><img style="width: 120px;" src="{{url_folder}}/static/OmniDB_app/images/supporters/2ndquadrant.png" title="2ndQuadrant"/></a>
                  </div>
                </div>
            </div>
        </div>
    </div>

    <div id="div_users" class="isModal">
        <div class="modal_background_dark">
            <div class ="users_box">
              <a class="modal-closer" onclick="hideUsers()">x</a>
              <div style='margin-left:10px; margin-top: 10px; display:inline-block;'>
            		<button onclick="newUser()">New User</button>
            	</div>
              <div id='div_save_users' style='visibility: hidden; display:inline-block;'>
            		<button onclick="saveUsers()">Save Data</button>
            	</div>
              <div style="padding: 10px;">
              	<div id='div_user_list' style='width: 100%; height: 200px; overflow: auto;'></div>
              </div>
            </div>
        </div>
    </div>

    <div id="div_edit_content" class="isModal">
        <div class="modal_background_dark">
            <div class ="white_box" style="width: 90%; height: 90%; left: 5%; top: 5%;">
                <a class="modal-closer" onclick="hideEditContent()">x</a>

                <div style="height: 90%; padding: 30px;">
                  <div id="txt_edit_content" style="width: 100%; height: 100%; font-size: 12px; border: 1px solid rgb(195, 195, 195);">
                  </div>
                </div>

            </div>
        </div>
    </div>

  <div id="div_error" class="isModal">
      <div class="modal_background_dark" style="z-index: 100001">
          <div class ="white_box" style="width: 90%; height: 90%; left: 5%; top: 5%; z-index: 2000;">
              <a class="modal-closer" onclick="hideError()">x</a>
              <div id="div_error_msg" class="error_text" style="height:100%; width:100%; margin-top:20px; text-align: center;"></div>
          </div>
      </div>
  </div>

  <div id="div_alert" class="isModal">
      <div class="modal_background_dark">
          <div class ="white_box" style="width: 40%; left: 30%; top: 50%;  transform: translate(0px, -50%); -webkit-transform: translate(0px, -50%);">
              <div id="div_alert_content" style="height:100%; width:100%;"></div>
          </div>
      </div>
  </div>

  <div id="div_password_prompt" class="isModal">
      <div class="modal_background_dark">
          <div class ="white_box" style="width: 50%; left: 25%; top: 20%; z-index: 2000; text-align: center;">
              <a id="bt2_password_prompt_cancel" class="modal-closer">x</a>
              <i class="fas fa-key icon-key-large"></i>
              <div id="div_password_prompt_msg" class="error_text" style="margin:20px 0px 20px 0px; padding: 0px 20px 0px 20px; max-height: 50px; overflow-y: auto;"></div>
              <div>
                <input id="txt_password_prompt" type="password" placeholder="Password" style="margin-bottom:20px; text-align: center;"/>
              </div>
              <div style="margin-bottom: 20px;">
                <button id="bt_password_prompt_ok">Ok</button>
                <button id="bt1_password_prompt_cancel">Cancel</button>
              </div>
          </div>
      </div>
  </div>

  <div id="div_autocomplete">
    <div id='div_autocomplete_loading' class='div_loading_local' style='z-index: 1000;'></div>
    <div id="div_test_length"></div>
    <!--<div id="div_autocomplete_label"></div>-->
    <input type="text" id="div_autocomplete_input" onkeyup="autocomplete_keyup(event,this)" onkeydown="autocomplete_keydown(event,this)"/>
    <div id="div_autocomplete_noresults">No results</div>
    <div id="div_autocomplete_scroll">
      <div class="div_autocomplete_row">
        <div class="div_autocomplete_type">
          <div>Databases</div>
          <i class="fas fa-database node-all node-database-list" title="Databases"></i>
          <div id="autocomplete_count_database">0 results</div>
        </div>
        <div id="autocomplete_grid_database" class="div_autocomplete_data">
        </div>
      </div>
      <div class="div_autocomplete_row">
        <div class="div_autocomplete_type">
          <div>Roles</div>
          <i class="fas fa-users node-all node-user-list" title="Roles"></i>
          <div id="autocomplete_count_role">0 results</div>
        </div>
        <div id="autocomplete_grid_role" class="div_autocomplete_data">
        </div>
      </div>
      <div class="div_autocomplete_row">
        <div class="div_autocomplete_type">
          <div>Tablespaces</div>
          <i class="fas fa-folder-open node-all node-tablespace-list" title="Tablespaces"></i>
          <div id="autocomplete_count_tablespace">0 results</div>
        </div>
        <div id="autocomplete_grid_tablespace" class="div_autocomplete_data">
        </div>
      </div>
      <div class="div_autocomplete_row">
        <div class="div_autocomplete_type">
          <div>Schemas</div>
          <i class="fas fa-layer-group node-all node-schema-list" title="Schemas"></i>
          <div id="autocomplete_count_schema">0 results</div>
        </div>
        <div id="autocomplete_grid_schema" class="div_autocomplete_data">
        </div>
      </div>
      <div class="div_autocomplete_row">
        <div class="div_autocomplete_type">
          <div>Extensions</div>
          <i class="fas fa-cubes node-all node-extension-list" title="Extensions"></i>
          <div id="autocomplete_count_extension">0 results</div>
        </div>
        <div id="autocomplete_grid_extension" class="div_autocomplete_data">
        </div>
      </div>
      <div class="div_autocomplete_row">
        <div class="div_autocomplete_type">
          <div>Tables</div>
          <i class="fas fa-table node-all node-table-list" title="Tables"></i>
          <div id="autocomplete_count_table">0 results</div>
        </div>
        <div id="autocomplete_grid_table" class="div_autocomplete_data">
        </div>
      </div>
      <div class="div_autocomplete_row">
        <div class="div_autocomplete_type">
          <div>Views</div>
          <i class="fas fa-eye node-all node-view-list" title="Views"></i>
          <div id="autocomplete_count_view">0 results</div>
        </div>
        <div id="autocomplete_grid_view" class="div_autocomplete_data">
        </div>
      </div>
      <div class="div_autocomplete_row">
        <div class="div_autocomplete_type">
          <div>Columns</div>
          <i class="fas fa-columns node-all node-column" title="Columns"></i>
          <div id="autocomplete_count_column">0 results</div>
        </div>
        <div id="autocomplete_grid_column" class="div_autocomplete_data">
        </div>
      </div>
      <div class="div_autocomplete_row">
        <div class="div_autocomplete_type">
          <div>Functions</div>
          <i class="fas fa-cog node-all node-function-list" title="Indexes"></i>
          <div id="autocomplete_count_function">0 results</div>
        </div>
        <div id="autocomplete_grid_function" class="div_autocomplete_data">
        </div>
      </div>
      <div class="div_autocomplete_row">
        <div class="div_autocomplete_type">
          <div>Indexes</div>
          <i class="fas fa-thumbtack node-all node-index" title="Indexes"></i>
          <div id="autocomplete_count_index">0 results</div>
        </div>
        <div id="autocomplete_grid_index" class="div_autocomplete_data">
        </div>
      </div>
      <div class="div_autocomplete_row">
        <div class="div_autocomplete_type">
          <div>Keywords</div>
          <i class="fas fa-font node-all node-keyword" title="Keywords"></i>
          <div id="autocomplete_count_keyword">0 results</div>
        </div>
        <div id="autocomplete_grid_keyword" class="div_autocomplete_data">
        </div>
      </div>
    </div>
    <input type="text" id="div_autocomplete_input2" onkeyup="autocomplete_keyup(event,this)" onkeydown="autocomplete_keydown(event,this)"/>
  </div>

  <div class="div_loading"><button id="bt_cancel_ajax" onclick="cancelAjax()">Cancel</button></div>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/jquery-1.11.2.min.js?v2.17.0.0"      ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/AjaxControl.js?v2.17.0.0"            ></script>
  <script type="text/javascript">
  startLoading()
  </script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/explain/react.js?v2.17.0.0"          ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/explain/react-dom.js?v2.17.0.0"      ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/explain/d3.js?v2.17.0.0"             ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/explain/pgplan.js?v2.17.0.0"         ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/popper.min.js?v2.17.0.0"             ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/tooltip.min.js?v2.17.0.0"            ></script>
	<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/jquery.dd.min.js?v2.17.0.0"          ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/xterm.js?v2.17.0.0"                  ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/fit.js?v2.17.0.0"                    ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/lib/ace/ace.js?v2.17.0.0"               ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/lib/ace/mode-sql.js?v2.17.0.0"          ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/lib/ace/ext-language_tools.js?v2.17.0.0"></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/lib/tabs/lib/tabs.js?v2.17.0.0"         ></script>
	<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/handsontable.full.js?v2.17.0.0"      ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/NotificationControl.js?v2.17.0.0"    ></script>

  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/WebSocketControl.js?v2.17.0.0"       ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/Renderers.js?v2.17.0.0"              ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/HeaderActions.js?v2.17.0.0"          ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/Passwords.js?v2.17.0.0"              ></script>
  <script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/Users.js?v2.17.0.0"                  ></script>

  <script type="text/javascript">

	//Global variables
	var v_editor_theme = '{{ editor_theme }}';
	var	v_theme_type = '{{ theme_type }}';
	var	v_theme_id = {{ theme_id }};
	var v_editor_font_size = {{ editor_font_size }};
  var v_interface_font_size = {{ interface_font_size }};
	var v_user_id = {{ user_id }};
  var v_user_key = '{{ user_key }}';
  var v_user_name = '{{ user_name }}';
	var v_enable_omnichat = parseInt({{ enable_omnichat }});
  var v_csv_encoding = '{{ csv_encoding }}';
  var v_csv_delimiter = '{{ csv_delimiter }}';
  var v_session_key = v_user_key;
  var v_user_login = v_user_name;
  var v_version = '{{ omnidb_version }}';
  var v_short_version = '{{ omnidb_short_version }}';
  var v_url_folder = '{{ url_folder }}';
  var v_welcome_closed = {{ welcome_closed }};

  var v_menu_item = '{{ menu_item }}'
  $('#menu_' + v_menu_item).addClass('header_a_selected');

  var ht;
  var network;
  var v_connTabControl;
  var v_usersObject;
  var v_editDataObject;
  var v_canEditContent;
  var v_editContentObject;
  var v_database_list = null;
  var v_completer_ready = true;
  var v_tree_object;
  var v_shortcut_object = {
    shortcuts: {{shortcuts|safe}},
    button: null,
    actions: null
  };

  </script>

  {% block include %}
  {% endblock %}

  <script type="text/javascript">
  endLoading()
  </script>

</body>
</html>
{% csrf_token %}
